<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆节点</title>
</head>
<body>
<h3>克隆节点</h3>
<p>
    特殊情况下，我们新增节点，按照如下操作： <br>
    复制一个原有的节点 <br>
    把复制的节点放入到指定的元素内部
</p>

<h3>语法</h3>
<p>
    // 克隆一个已有的节点 <br>
    元素.cloneNode(布尔值)
</p>
<p>
    cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值 <br>
    若为true，则代表克隆时会包含后代节点一起克隆 (深克隆,标签和内容)<br>
    若为false，则代表克隆时不包含后代节点  (浅克隆,只标签)<br>
    默认为false
</p>
<hr>

<!--演示-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    // 获取DOM元素
    const ul = document.querySelector('ul')
    // 1 克隆节点  元素.cloneNode()
    const 第一个li = ul.children[0].cloneNode(true) // children[0] 定位数组的第一个元素
    // 2. 追加节点
    ul.appendChild(第一个li)

    // ul.appendChild(ul.children[0].cloneNode(true)) // 连着写
</script>
</body>
</html>